<template>
  <div class="container">
    <div class="taskList-head">
      <el-button class="btn" icon="el-icon-document-copy" @click="paperList">
        试卷列表</el-button
      >
      <el-button class="btn" icon="el-icon-upload" @click="taskbuild"
        >任务创建</el-button
      >
    </div>
    <el-table
      :data="tableData"
      v-loading="tableLoading"
      style="width: 100%"
      stripe
    >
      <el-table-column label="考试任务id" prop="id" width="100"> </el-table-column>
      <el-table-column label="试卷id" prop="paperId" width="100"> </el-table-column>
      <el-table-column label="考试名称" prop="title" align="center" width="150">
      </el-table-column>
      <el-table-column label="创建人Id" prop="creatorId" align="center" width="100">
      </el-table-column>
      <el-table-column label="考试班级" prop="classNamesList" align="center" width="180">
          <template v-slot="{ row }">
           <el-tag
            v-for="item in row.classNamesList"
            :key="item"
            >{{ item }}</el-tag> 
        </template>
          
      </el-table-column>
      <el-table-column label="考试时间" width="320" align="center">
        <template v-slot="{ row }">
          <span v-if="row.startTime">
            {{ row.startTime }}&nbsp;至&nbsp; {{ row.endTime }}</span
          >
        </template>
      </el-table-column>

      <el-table-column label="操作" width="400" align="center">
        <template v-slot="{ row }">
          <!--el-button
            v-if="row.status == 'DISABLE'"
            size="mini"
            class="btn_primary"
            :loading="row.statusLoading"
            icon="el-icon-s-promotion"
            @click="handleStatus(row, 'ENABLE')"
            >发布</el-button
          -->
          <!--el-button
            v-else
            size="mini"
            class="btn_danger"
            icon="el-icon-switch-button"
            :loading="row.statusLoading"
            @click="handleStatus(row, 'DISABLE')"
            >关闭</el-button
          -->
          <el-button
            size="mini"
            class="btn_primary"
            icon="el-icon-edit"
            @click="editTask(row)"
            >编辑</el-button
          >
          <el-popover placement="top" width="480" trigger="click">
            <el-date-picker
              v-model="row.limitDateTime"
              type="datetimerange"
              range-separator="至"
              size="small"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
            <el-button
              style="margin-left:5px"
              type="primary"
              size="mini"
              :loading="row.editTimeLoading"
              @click="handleTime(row)"
              >确定</el-button
            >
            <el-button
              slot="reference"
              size="mini"
              class="btn_primary"
              icon="el-icon-time"
              @click="timeTransfer(row)"
              >修改时间</el-button
            >
          </el-popover>
          <el-popconfirm
            icon="el-icon-info"
            icon-color="red"
            title="确定删除这个题目吗？"
            @confirm="() => handleDelete(row)"
          >
            <el-button
              class="btn_danger"
              slot="reference"
              size="mini"
              icon="el-icon-delete"
              :loading="row.delLoading"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
  
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParam.pageNum"
      :page-sizes="[5, 10, 20, 30, 50]"
      :page-size="queryParam.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalSize"
    >
    </el-pagination>
  </div>
</template>

<script>
import {
  getTaskList,
  taskDel,
  getClassTaskList,
  //taskChangeStatus,
  taskChangeTime
} from "@/api/task.js";
export default {
  data() {
    return{
      queryParam: {
        pageNum: 1,
        pageSize: 10
      },
      totalSize: 0,
      tableData: [],
      tableLoading: false
    }
  },
  created() {
    this.getTableData();
  },
  methods: {
    //获取表格数据
    getTableData() {
      let obj = {
        pageNum: this.queryParam.pageNum,
        pageSize: this.queryParam.pageSize,
        schoolId: JSON.parse(localStorage.getItem("user")).schoolId
      };
      this.tableLoading = true;
      getTaskList(obj)
        .then(res => {
          res.data.records.forEach(element => {
            //element.statusLoading = false;
            element.delLoading = false;
            element.editTimeLoading = false;
            element.limitDateTime = [element.startTime, element.endTime];
          });
          this.tableData = res.data.records;
          this.totalSize = res.data.total;
          console.log(this.tableData);
        })
        .catch(() => {
          this.$message.error("获取任务列表失败");
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    /*/修改考试状态
    handleStatus(row, status) {
      row.statusLoading = true;
      let obj = {
        id: row.id,
        status: status
      };
      taskChangeStatus(obj)
        .then(res => {
          if (status == "DISABLE") {
            this.$message.success("已关闭"), (row.status = "DISABLE");
          } else {
            this.$message.success("已发布");
            row.status = "ENABLE";
          }
        })
        .finally(() => {
          row.statusLoading = false;
        });
    },*/

    //删除
    handleDelete(row) {
      row.delLoading = true;
      taskDel(row.id)
        .then(res => {
          this.$message.success("删除成功");
          this.getTableData();
        })
        .catch(() => {})
        .finally(() => {
          row.delLoading = false;
          this.isLink = true;
        });
    },
    //修改考试时间范围
    handleTime(row) {
      row.editTimeLoading = true;
      let obj = {
        id: row.id,
        startTime: row.limitDateTime[0],
        endTime: row.limitDateTime[1]
      };
      taskChangeTime(obj)
        .then(res => {
          this.$message.success("修改成功");
          (row.startTime = row.limitDateTime[0]),
            (row.endTime = row.limitDateTime[1]);
        })
        .finally(() => {
          row.editTimeLoading = false;
        });
    },
    paperList() {
      this.$router.push({
        path: "./paperlist"
      });
    },
    handleSizeChange(size) {
      this.queryParam.pageSize = size;
      this.getTableData();
    },
    handleCurrentChange(page) {
      this.queryParam.pageNum = page;
      this.getTableData();
    },
    editTask(row){
      console.log(row);
      this.$router.push({
        name: "testModule/taskbuild",
        params: { data: row }
      });
    },
    taskbuild() {
      this.$router.push({
        path: "./taskbuild"
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.taskList-head {
  text-align: right;
  margin-bottom: 10px;
  .btn {
    background: #5b8bff;
    color: #f4f4f5;
    height: 30px !important;
    line-height: 30px;
    width: 100px;
    border-radius: 20px;
    padding: 0;
  }
  .Qedit {
    color: #5c89fe;
  }
}
.el-table {
  margin-bottom: 10px;
}
</style>
